<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="echarts.js"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="china-main-city-map.js" charset="utf-8"></script>
	</head>

	<body>
		<h1>4G网络在各区的使用者分布人数</h1>
		<div id="main" style="width:300px;height:600px;"></div>
		<script type="text/javascript">
			var locations = [{
				name: '雨花台区',
				coord: [118.787187, 31.996941]
			}, {
				name: '玄武区',
				coord: [118.806303, 32.053269]
			}, {
				name: '江宁区',
				coord: [118.840366, 31.955162]
			}];
			var myChart = echarts.init(document.getElementById('main'));
			loadMap('320100', '南京市');

			function loadMap(mapCode, mapName) {
				$.getJSON('china-main-city/' + mapCode + '.json', function(data) {
					if(data) {
						echarts.registerMap(mapName, data);
						var option = {
							tooltip: {
								trigger: 'item',
								formatter: '{b}<br>{c}'
							},
							toolbox: {
								show: true,
								orient: 'vertical',
								left: 'right',
								top: 'center',
								feature: {
									dataView: {
										readOnly: false
									},
									restore: {},
									saveAsImage: {}
								}
							},
							visualMap: {
								min: 800,
								max: 50000,
								text: ['High', 'Low'],
								realtime: false,
								calculable: true,
								inRange: {
									color: ['lightskyblue', 'yellow', 'orangered']
								}
							},
							series: [{
								name: '',
								type: 'map',
								mapType: mapName,
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: false
									}
								},
								data: [{
										name: '雨花台区',
										value: 20057.34
									}, {
										name: '秦淮区',
										value: 20057.34
									}, {
										name: '下关区',
										value: 15477.48
									}, {
										name: '玄武区',
										value: 31686.1
									}, {
										name: '溧水县',
										value: 6992.6
									}, {
										name: '白下区',
										value: 44045.49
									}, {
										name: '高淳县',
										value: 40689.64
									}, {
										name: '鼓楼区',
										value: 37659.78
									}, {
										name: '建邺区',
										value: 45180.97
									}, {
										name: '江宁区',
										value: 55204.26
									}, {
										name: '六合区',
										value: 21900.9
									}, {
										name: '浦口区',
										value: 4918.26
									}, {
										name: '栖霞区',
										value: 5881.84
									},

								],
								animationDurationUpdate: 1000,
								animationEasingUpdate: 'cubicInOut'
							}]
						};
						myChart.setOption(option);
						var currentLoc = 0;
						console.log();
						setInterval(function() {
							option.series[0].data[currentLoc].value="123"
							myChart.setOption(option);
							//currentLoc = (currentLoc + 1) % option.series[0].length;
						}, 2000);
					} else {
						alert('无法加载该地图');
					}
				});
			}
		</script>

	</body>

</html>